Group name

IN THIS PAGE

Defining Groups
Implementing Groups

Description

When you define an editor inside an editor set, and you click on a given field in the Form View, you then have the option of editing that individual field inside the editor. If you wanted to click on a single field in the Form View, like an ADDRESS field, and then edit multiple fields in one go, you would need a 'group' of editors. Click on a given field in the group and you will be able to edit all of the fields in that group.

The Group name property

Assigning a defined group

For a video explanation on how to use groups watch this video.

Defining Groups

Clicking the button next to the Group name property loads a list of defined 'groups' created from existing fields inside the form view. In order to define a new group click the 'Create/manage/edit Groups' button at the bottom-center of the Form View Builder's Fields pane.

The 'Create/manage/edit Groups' button

This will open the Define Groups dialog along with a list of Group Properties. Here you can add a new group by clicking the 'Add Group' button. The 'Manage Fields in Group' button opens a dialog that lets you assign fields to a group from a list of available fields. Use the right > arrow to add fields to a group and the left < arrow to remove them.

Adding a group
Defining the Fields in a group.

If you are defining a group editor it will probably be necessary to make a few changes to the 'Set value in editor' property. This is found in the Editor's properties list, not in the form view. Watch the videos or follow the guide below on Implementing groups for more details.

Implementing Groups

In the UX Builder open the UX Controls page. In the 'Data Controls' menu click on [List] to add a list control to the component.
Highlight the list control. In the control properties list click the button next to the List properties property in the 'List Properties' section. The List Builder will load.
In the List Builder open the Data Source pane. Define a Data Source with at least 6 fields in it. This example uses a SQL Data Source Type defined as follows:
- In the Data Source Type menu select SQL
- In the SQL Data Source section set the Connection string property to be the Northwind database.
- For the Table name property select 'Customers'
- For the Field list property select the following fields: Address, City, Country, CompanyName, and PostalCode.
Go to the List Builder's List Layout pane. Use the blue > arrow to move the six fields from the Available Fields pane to the Columns in List section. Click OK to close the List Builder.
In the UX Controls page's 'Other Controls' menu click on the [Form View] option to add a form view to the comoponent.
Open the UX Controls page's Containers menu and click on the [Container] option.
The Insert Container dialog will open. Select EditorSet from the Container Type list and click 'Insert After'.
Go to the 'Defined Controls' menu click the Editor-TextBox option to add an editor control that uses a textbox. Place the editor control inside of the editor set.
Click on Editor-TextBox to add a second editor control to the component. Place this control inside the editor set as well.
Delete the existing textbox control inside the second editor, EDITOR_2
The textbox in Editor_2 is deleted
Open the Data Controls and click on [TextBox] to add a new textbox control to EDITOR_2. Give this control the name EDITOR_2_ADDRESS and the label 'Address'.
Click [TextBox] a second time to add a second control to Editor_2. Name this control EDITOR_2_CITY and label it City.
Add a third [TextBox] control to Editor_2. Name this control EDITOR_2_POSTALCODE and give it the label 'Postal Code'
Add one final [Textbox] control to Editor_2. Name this control EDITOR_2_COUNTRY and label it 'Country'.
Highlight the editor set and both the editors, open the Containers menu, and place all of the selected items in a 'None' Container. This mainly helps with display of the editors.
Highlight the Form View control. In the properties list click the button next to the Form properties property to open the Form View Builder.
On the Data Source pane set the Datasource type property to List and the 'List name' property to be 'list1', the list control that was defined earlier.
Next go to the Form Layout tab and click the 'Add item' button in the lower left.
In the Category menu select Data Controls and in the 'Control' menu select [Label]. Then highlight all of the fields in the fields list and click OK.
Open the Fields pane. Highlight the 'CompanyName' field. In the 'Editing' section of the properties list click the button next to the Editor set property.
The Select Editor dialog will open. Highlight EDITORSET_1 and the EDITOR_1. Click OK.
Now highlight the ContactName field. Again click the button next to the Editor set property.
Assign ContactName to EDITORSET_1 and EDITOR_1 as well. Click OK
Click the 'Create/manage/edit Groups' button at the bottom-center of the Fields pane.
Click 'Add Group' give the group the name COUNTRY. Click OK.
Click the button next to the Editor set property in the Add group dialog. Set the Editor set to EDITORSET_1 and the editor to EDITOR_2.
Click on the 'Manage Fields in Group' button.
Use the > arrow to move the Address, City, PostalCode, and Country fields from the Available Fields list to the Fields in Group list.
You can also assign fields to a group using the Group name property on the Fields pane of the Form View Builder.
Use the up and down arrows to order the list address, city, postal code, country. Then click OK, OK, and OK again.
Ordering here is important. You are essentially creating an array of fields. This will be important in the next step which assigns values based on the elements of this array.
Highlight the EDITOR_2 control.
In the Editor Properties list, on the right, click on the 'Set value in editor' property.

In the 'Set value in editor' replace the existing code with this:

{dialog.object}.setValue('EDITOR_2_ADDRESS',value[0]);
{dialog.object}.setValue('EDITOR_2_CITY',value[1]);
{dialog.object}.setValue('EDITOR_2_POSTALCODE',value[2]);
{dialog.object}.setValue('EDITOR_2_COUNTRY',value[3]);

This property gets the value of the fields from the Form View control and places them in the editor.

Click OK to return to the UX Controls page. Click the button next to the 'Show editor' property to open it.
Add the following code to the end of the existing code
```
var control = settings['*a5column'];
control = 'EDITOR_2_' + control
var ele = {dialog.object}.getPointer(control)

ele.select();
```
This code will display the editor on the screen. The code you added will highlight the selected field, so that you can start editing the field that you click on in the Form View, rather than the first field in the group.
Click OK. In the Controls page click the button next to the 'Get value from editor' property
In the opened Commit Editor replace the existing code with the following
```
var _data = []

_data.push({dialog.object}.getValue('EDITOR_2_ADDRESS'));
_data.push({dialog.object}.getValue('EDITOR_2_CITY'));
_data.push({dialog.object}.getValue('EDITOR_2_POSTALCODE'));
_data.push({dialog.object}.getValue('EDITOR_2_COUNTRY'));

return _data;
```
This is a crucial step. This code gets the new values from the editor, the ones the user enters, and uses these values to repopulate the Formview. Without this code the group fields in the Form View will appear empty until the row is re-opened from the list control.
Go to Live Preview and run the Component. Open the form view by clicking on a row. Then click on the Contact field. A single editor should appear
No try clicking on the city field in the Form View control. You should see the group editor open.

Report an issue with this page